<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core_1_1" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>绝地求生页面</title>
</head>
<script type="text/javascript" src="static/script/jquery-1.7.2.js"></script>
<script>
    $(function(){
        var obj = document.getElementById("test");
        console.log(obj.offsetHeight);
        console.log(obj.clientHeight);
        console.log(obj.scrollTop);
    });
    window.οnscrοll=function(){
        //alert(1);
        var obj = document.getElementById("test");
        //滚动条距离顶部的高度
        console.log("getScrollTop() : " + getScrollTop());
        //可视化窗口的高度
        console.log("getClientHeight() : " + getClientHeight());
        //内容的高度
        console.log("getScrollHeight() : " + getScrollHeight());
        //test();
    };
    /********************
     * 取窗口滚动条高度
     ******************/
    function getScrollTop() {
        var scrollTop = 0;
        if (document.documentElement && document.documentElement.scrollTop) {
            scrollTop = document.documentElement.scrollTop
        } else {
            if (document.body) {
                scrollTop = document.body.scrollTop
            }
        }
        return scrollTop
    }
    /********************
     * 取窗口可视范围的高度
     *******************/
    function getClientHeight() {
        var clientHeight = 0;
        if (document.body.clientHeight && document.documentElement.clientHeight) {
            var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight
        } else {
            var clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight
        }
        return clientHeight
    }
    /********************
     * 取文档内容实际高度
     *******************/
    function getScrollHeight() {
        return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
    }
    function test() {
        if (getScrollTop() + getClientHeight() == getScrollHeight()) {
            alert("到达底部")
        } else {
            alert("没有到达底部")
        }
    }
</script>
<style>
    body{
        margin: 0;
    }
    .div2{
        height: 100px;
        line-height: 100px;
        width: 100%;
        text-align: left;
        margin: 0;
        opacity: 0.9;
    }
    .div1{
        width: 100%;
        height: auto;
    }
    #content2{
        margin-top: 20px;
        width: 1000px;
        height: 100px;
        background-color: #b3b3b3;
        border-radius: 10px;
        border: 0;
        font-size: 26px;
    }
    #content2:focus{
      background-color: white;
    }
    a{
        color: black;
        text-decoration: none;
    }
    .button20{
        font-size: 17px;
        width: 100px;
        height: 30px;
        background-color: #0093c9;
        opacity: 0.9;
        position: relative;
        left: 540px;
        border-radius: 5px;
        border: 0;
    }
    .sipin{
        margin:0 0 0 190px;
        float: left;
        width: 700px;
        height: 450px;
    }
    .img2{
        width: 700px;
        height: 450px;
    }
    .kongxi{
        float: left;
        width: 20px;
        height: 450px;
    }
    .jiesao{
        margin:0 100px 0 0;
        float: left;
        width: 400px;
        height: 450px;
    }
    .img1{
        width:400px;
        height: 190px;
    }
    .pinlunqu{
        text-align: center;
        float: left;
        border-style: solid;
        border-width: 1px;
        width: 1300px;
        background-color: #2b638f;
        position: relative;
        left: 100px;
        top: 50px;
        height: 760px;
        border-radius: 10px;
    }
    .head{
        background-color: #004962;
        margin: 0;
        width: 100%;
        height:1400px;
    }
    .button2{
        border-radius: 5px;
        width: 120px;
        height: 34px;
        background-color: #7fca2f;
        border: 0;
        margin-left: -880px;
        font-size: 16px;
    }
    .book_name{

    }
    .sp1{
        font-size: 20px;
        margin-left: -900px;
    }
    .book_name{
        margin-top: 20px;
    }
    #page_nav{
        background-color: #78c2e3;
        width: 100%;
        height: 50px;
        line-height: 50px;
        margin: auto;
        text-align: center;
        border-radius: 10px;
    }
    #page_nav a{
        text-decoration: none;
        color: #323133;
    }
    #page_nav a:hover{
        text-decoration: none;
        color: #ffc820;
    }
    .button3{
        width: 50px;
        height: 30px;
        border: 0;
        background-color: #2c9831;
        border-radius: 5px;
    }
    input{
        width: 35px;
        background-color: #2b638f;
    }
</style>
<body>
<div id="test" style="width:100%;height:1400px;">

<div class="head">

    <div class="div2">
        <h2 style="color: white;margin:0 0 0 190px;display: inline-block">PLAYERUNKNOWN'S BATTLEGROUNDS</h2>
        <button class="button20"><a href="pages/user/first_page.jsp">返回首页</a></button>
    </div>

    <div class="sipin">
        <img class="img2" src="static/img/1.png" alt="">

     </div>


    <div class="kongxi">

    </div>

    <div class="jiesao">
        <img class="img1" src="static/img/juediqiushen.png" alt="">
        <p style="color:white">绝地求生(PLAYERUNKNOWN'S BATTLEGROUNDS)是战术竞技类型的游戏。每一局游戏将有100名玩家参与,他们将被投放到绝地岛(battlegrounds)的上空。游戏开始所有人都一无所有。</p>
        <p style="color:black;font-weight: bold;margin: 0">最近评测&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #e30000">多半差评</span>(29418)</p>
        <p style="color:black;font-weight: bold;margin: 0">全部评测&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #e7e700">褒贬不一</span>(874690)</p>
        <p style="color:black;font-weight: bold">发行日期&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c2c2c2">2017年12月21日</span></p>
        <p style="color:black;font-weight: bold;margin: 0">开发商&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #0085bb">PUBG Corporation</span></p>
        <p style="color:black;font-weight: bold;margin: 0">发行商&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #0085bb">PUBG Corporation</span></p>

    </div>

    <div class="pinlunqu">

        <div class="div1">
            <h1 style="font-weight: normal;margin:30px 0 0 -840px">发言输入框</h1>
            <form action="CommentServlet" method="post">
                <input type="hidden" name="action" value="addComment">
                <label for="content2"></label><input id="content2" type="text" name="content" value="${param.content}">
                <br><br><input type="submit" value="发表" class="button2"/>
            </form>
        </div>

        <div style="height: 400px">
        <h1 style="font-weight: normal;margin:30px 0 0 -900px;">评论区</h1>

        <c:forEach items="${requestScope.page.items}" var="comment">
            <div style="background-color: #7fca2f">
            <div class="book_name">
                <span class="sp1">用户名:</span>
                <span class="sp2">${comment.name}</span>
            </div>
            <div class="book_name">
                <span class="sp1">评论内容:</span>
                <span class="sp2">${comment.content}</span>
            </div>
            </div>
        </c:forEach>

        </div>
        <br>

        <%@include file="/pages/common/page_nav.jsp"%>

    </div>



</div>


</div>

</body>
</html>
